<div xmlns:h="http://java.sun.com/jsf/html"
  xmlns:nxl="http://nuxeo.org/nxforms/layout"
  xmlns:nxh="http://nuxeo.org/nxweb/html"
  xmlns:a4j="http://richfaces.org/a4j">

  <a4j:region>
    <a4j:outputPanel id="profilePanel" layout="block" class="mainNoTabs">

      <div class="globalActionBar">
        <h:form id="userProfileButtons" rendered="#{userProfileActions.mode == 'view'}">
          <h1>
            <h:outputText value="#{userProfileActions.userProfile.user.firstName} #{userProfileActions.userProfile.user.lastName}"/>
          </h1>
          <ul class="actionList" id="userProfileDropDownMenu">
             <li class="dropDownMenu button dropdown">
               <h:outputText value="#{messages['label.content.header.actions']}" />
               <ul class="actionSubList">
                 <li>
                   <a4j:commandLink id="editUserButton"
                        action="#{userProfileActions.setMode('edit')}"
                        immediate="#{action.immediate}"
                        rendered="#{userProfileActions.mode == 'view'}"
                        render="profilePanel">
                        <h:outputText value="#{messages['label.userManager.editUser']}" />
                   </a4j:commandLink>
                 </li>
                 <li>
                   <a4j:commandLink  id="changePasswordButton"
                      action="#{userProfileActions.setMode('editProfilePassword')}"
                      immediate="#{action.immediate}"
                      rendered="#{userProfileActions.mode == 'view' and userProfileActions.canEdit}"
                      render="profilePanel">
                      <h:outputText value="#{messages['command.change.password']}" />
                   </a4j:commandLink>
                 </li>
               </ul>
             </li>
          </ul>

          <script>
            jQuery(document).ready(function() {
              jQuery("#userProfileDropDownMenu").dropdown();
            });
          </script>

        </h:form>
      </div>
      <div class="clear"></div>

      <h:form id="viewUser" rendered="#{userProfileActions.mode == 'view'}">
        <nxl:layout name="gridUserLayout" mode="view"
          value="#{userProfileActions.userProfile}" />
      </h:form>

      <h:form id="editUser" enctype="multipart/form-data"
        rendered="#{userProfileActions.mode == 'edit'}">
        <nxl:layout name="user" mode="#{userProfileActions.canEdit ? 'edit' : 'view'}" value="#{userProfileActions.currentUserModel}" />
        <nxl:layout name="userprofile" mode="edit" value="#{userProfileActions.userProfileDocument}" />
        <table class="dataInput">
          <tbody>
            <tr>
              <td class="iconColumn"></td>
              <td class="labelColumn"></td>
              <td class="fieldColumn">
                <h:commandButton id="saveUserButton"
                  value="#{messages['command.save']}"
                  action="#{userProfileActions.updateUser}"
                  styleClass="button" />
                <h:commandButton
                  value="#{messages['command.cancel']}"
                  actionListener="#{editableListBean.resetAllListsCachedModels}"
                  action="#{userProfileActions.setMode('view')}"
                  immediate="true"
                  styleClass="button" id="viewUserButton"
                  rendered="#{userProfileActions.mode != 'view'}" />
              </td>
            </tr>
          </tbody>
        </table>
      </h:form>

      <h:form id="editUserPassword" rendered="#{userProfileActions.mode == 'editProfilePassword'}">
        <nxl:layout name="profile_password" mode="#{userProfileActions.canEdit ? 'editProfilePassword' : 'hidden'}" value="#{userProfileActions.currentUserModel}" />
        <table class="dataInput">
          <tbody>
            <tr>
              <td class="iconColumn"></td>
              <td class="labelColumn"></td>
              <td class="fieldColumn">
                <h:commandButton id="saveUserPasswordButton"
                  value="#{messages['command.save']}"
                  action="#{userManagementActions.updateProfilePassword}"
                  styleClass="button"
                  rendered="#{userProfileActions.canEdit}"
                  render="profilePanel"/>
                <h:commandButton
                  value="#{messages['command.cancel']}"
                  actionListener="#{editableListBean.resetAllListsCachedModels}"
                  action="#{userProfileActions.setMode('view')}"
                  immediate="true"
                  styleClass="button" id="viewUserButton"
                  rendered="#{userProfileActions.mode != 'view'}"
                  render="profilePanel" />
              </td>
            </tr>
          </tbody>
        </table>
      </h:form>

    </a4j:outputPanel>
  </a4j:region>
</div>
